const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  // devtool: "source-map",
  entry: {
    page1: "./src/page1",
    page2: "./src/page2",
  },
  output: {
    filename: "[name].[chunkhash:5].js",
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      // maxSize: 6000,   // 对于浏览器可以使用多线程并行下载有意义，如果浏览器不能使用多线程的话，会多请求，慎用
      // automaticNameDelimiter: ".",   // 分包路径, 默认为~
      // minChunks: 1, // chunks被引用了几次后分包
      // minSize: 0,  // chunks最小值为多少时进行分包策略
      cacheGroups: {
        // 属性名时缓存组名称，会影响到分包的chunk名
        // 属性值时缓存组的配置，缓存组继承所有的全局配置，也有自己体术的配置
        // vendors: {
        //   test: /[\\/]node_modules[\\/]/, // 当匹配到相应模块时，将这些模块进行单独打包
        //   priority: -10, // 缓存组优先级，优先级越高，该策略越先进行处理，默认值为0
        // },
        // default: {
        //   minChunks: 2, // 覆盖全局配置，将最小chunk引用数改为2
        //   priority: -20, // 优先级
        //   reuseExistingChunk: true, // 重用已经被分离出去的chunk
        // },
        styles: {
          minSize: 0,
          test: /\.css$/,
          minChunks: 2,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["page1"],
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:5].css", // 其他css文件
      chunkFilename: "common.[hash:5].css", // 公共css文件
    }),
  ],
  stats: {
    colors: true,
    chunks: false,
    modules: false,
  },
};
